<template>
<div>
    <div class="head">
        <div class="touxiang">
            <img src="http://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png">
        </div>
        <div class="user">用户</div>
    </div>
    <div class="nav">
        <div>我的订单</div>
        <div>优惠卷</div>
        <div>我的足迹</div>
        <router-link to="/home/collect"><div>我的收藏</div></router-link>
        <router-link to="/my/address"><div>地址管理</div></router-link>
        <div>联系客服</div>
        <div>帮助中心</div>
        <div>意见反馈</div>
        <div></div>
    </div>
    <div class="grey">

    </div>
</div>
  
</template>

<script>
export default {

}
</script>

<style>
    a{
        color: black;
    }
    .head{
        width: 100%;
        height: 142px;
        background-color: #333333;
        overflow: hidden;
    }
    .touxiang{
        margin-top: 24px;
        margin-left: 24px;
        width: 76px;
        height: 76px;
    }
    .touxiang img{
        border-radius: 50%;
        width: 76px;
        height: 76px;
    }
    .head div{
        float: left;
    }
    .user{
        margin-top: 24px;
        width: 76px;
        height: 76px;
        color: white;
        line-height: 76px;
        font-size: 16px;
        font-weight: 900;
    }
    .nav{
        width: 100%;
        height: 220px;
        background-color: #F4F4F4;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .nav div{
        width: 123px;
        height: 72px;
        background-color: white;
        line-height: 72px;
        font-size: 14px;
        font-weight: 900;
    }
    .grey{
        width: 100%;
        height: 302px;
        background-color: #F4F4F4;
    }
</style>